﻿@page "/diagram/annotations"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@using Newtonsoft.Json.Linq;

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates the competitive environment of a business through a five-force chart. The elements of a five-force chart are described using nodes and annotations. Customizing the position and appearance of the annotations is illustrated in this example.</p>
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p>This example shows how to add textual descriptions to shapes and how to position them over the shapes. The <a target='_blank' href='https://blazor.syncfusion.com/documentation/diagram/annotations/labels/'>Annotations</a> property of the nodes can be used to add descriptions.</p>
   <p>The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_Offset'>Offset</a>, <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_HorizontalAlignment'>HorizontalAlignment</a>, and <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramNodeAnnotation.html#Syncfusion_Blazor_Diagrams_DiagramNodeAnnotation_VerticalAlignment'>VerticalAlignment</a> properties of the annotation can be used to customize the position of the descriptions. The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Bold'>Bold</a>, <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_Italic'>Italic</a>, <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_FontSize'>FontSize</a>, and <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.AnnotationStyle.html#Syncfusion_Blazor_Diagrams_AnnotationStyle_FontFamily'>FontFamily</a> properties can be used to customize the appearance of the descriptions.To change the position of the descriptions, select a node and choose the template in the property panel.</p><br>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    @*Hidden:Lines*@
    <style>


        .image-pattern-style {
            background-color: white;
            background-size: contain;
            background-repeat: no-repeat;
            height: 60px;
            width: calc((100% - 18px) / 3);
            cursor: pointer;
            border: 1px solid #D5D5D5;
            background-position: center;
            float: left;
        }

        .sb-property-border {
            border-right: 1px solid #D7D7D7;
        }

        .property-panel-header {
            padding-top: 15px;
            padding-bottom: 5px;
            font-weight: 600;
            font-size: 15px;
        }

        .image-pattern-style:hover {
            border-color: gray;
            border-width: 2px;
        }

        .e-remove-selection .property-section-content {
            pointer-events: none;
        }

        .column-style {
            display: table;
            height: 35px;
            padding-right: 4px;
            padding-left: 0px;
            width: calc((100% - 12px) / 3);
        }

        .row {
            margin-left: 0px;
            margin-right: 0px;
            display: block;
        }

        .row-header {
            font-size: 13px;
            font-weight: 600;
        }

        .e-checkbox-wrapper .e-label {
            font-size: 12px;
        }

        .e-selected-style {
            border-color: #006CE6;
            border-width: 2px;
        }

        .col-xs-6 {
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 5px;
        }

        /*.property-section .e-remove-selection {
            cursor: not-allowed;
        }*/




        .buttonstyle {
            display: table;
            height: 35px;
            padding-right: 4px;
            padding-left: 0px;
            width: 117px;
            float: left;
        }

        .column-style custom {
            display: table;
            height: 35px;
            padding-right: 4px;
            padding-left: 0px;
            width: 70px;
        }

        .e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon {
            display: inline-block;
            font-size: 14px;
            margin-top: -2px;
            vertical-align: middle;
            width: 1em;
        }


        @@font-face {
            font-family: 'e-bg-icons';
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        #bold, #italic, #underline {
            width: 100%;
        }

        .bg-icons {
            font-family: 'e-bg-icons' !important;
            speak: none;
            font-size: 14px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .e-btngrp-bold::before {
            content: '\e71a'
        }

        .e-btngrp-italic::before {
            content: '\e708';
        }

        .e-btngrp-underline::before {
            content: '\e703';
        }

        .texstyle {
            display: table;
            height: 35px;
            padding-right: 4px;
            padding-left: 0px;
            width: 50%;
            padding-top: 15px;
            float: left;
            position: relative;
            min-height: 1px;
        }
    </style>
    @*End:Hidden*@
    <div id="diagram-space" class="content-wrapper">
        <SfDiagram Height="645px" Constraints="@Constraints" @ref="@Diagram" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
            <DiagramSnapSettings Constraints="SnapConstraints.None"></DiagramSnapSettings>
            <DiagramEvents Created="@OnCreated" SelectionChanged="@SelectionChange"></DiagramEvents>
            <DiagramPageSettings>
                <DiagramFitOptions CanFit="true" Mode="FitModes.Width"></DiagramFitOptions>
            </DiagramPageSettings>
        </SfDiagram>
    </div>
</div>
@*Hidden:Lines*@
<div class="col-lg-3 property-section">
    <div class="property-panel-header">
        Properties
    </div>
    <div class="@appearance">
        <div class="row property-panel-content" id="appearance">
            <div class="row row-header" style="padding-top: 10px">
                Alignment
            </div>
            <div class="row">
                <div class="row" style="padding-top: 8px">
                    <div class="@dict["left"]" id="left" @onclick="@(() => UpdatePosition("left"))" style="background-image: url(images/diagram/annotation/top-left.png); margin-right: 4px">
                    </div>
                    <div class="@dict["right"]" id="right" @onclick="@(() => UpdatePosition("right"))" style="background-image: url(images/diagram/annotation/top-right.png); margin: 0px 4px">
                    </div>
                    <div class="@dict["bottoml"]" id="bottoml" @onclick="@(() => UpdatePosition("bottoml"))" style="background-image: url(images/diagram/annotation/bottom-left.png);margin-left: 4px">
                    </div>
                </div>
                <div class="row" style="padding-top: 8px">
                    <div class="@dict["bottomr"]" id="bottomr" @onclick="@(() => UpdatePosition("bottomr"))" style="background-image: url(images/diagram/annotation/bottom-right.png); margin-right: 4px">
                    </div>
                    <div class="@dict["center"]" id="center" @onclick="@(() => UpdatePosition("center"))" style="background-image: url(images/diagram/annotation/center.png); margin: 0px 4px">
                    </div>
                    <div class="@dict["bottomcenter_top"]" id="bottomcenter_top" @onclick="@(() => UpdatePosition("bottomcenter_top"))" style="background-image: url(images/diagram/annotation/bottom-center.png);margin-left: 4px">
                    </div>
                </div>
            </div>
        </div>
        <div class="row property-panel-content" style="padding-top: 10px">
            <div class="row row-header" style="padding-top: 10px">
                Appearance
            </div>
            <div class="row" style="padding-top: 8px">
                <div class="buttonstyle">
                    <SfButton @ref="@BoldButton" ID="bold" OnClick="FontBold" CssClass="boldwidth button" iconCss="e-btn-icon e-de-ctnr-bold e-icons"></SfButton>
                </div>
                <div class="buttonstyle ">
                    <SfButton @ref="@ItalicButton" ID="italic" OnClick="FontItalic" CssClass="boldwidth button" iconCss="e-btn-icon e-de-ctnr-italic e-icons"></SfButton>
                </div>
                <div class="buttonstyle">
                    <SfButton @ref="@UnderlineButton" ID="underline" OnClick="FontUnderLine" CssClass="boldwidth button" iconCss="e-btn-icon e-de-ctnr-underline e-icons"></SfButton>

                </div>
            </div>
            <div class="row" style="padding-top: 8px">
                <div class="texstyle">
                    Font Size
                </div>
                <div class="col-xs-6" style="width:170px">
                    <SfNumericTextBox @ref="@fontsize" ID="fontSize" TValue="int" @bind-Value="@fontsizeValue" Min="1" Max="50" Enabled="true" Format="##.##" Step="1" Width="100%" CssClass="textboxstyle">
                        <NumericTextBoxEvents TValue="int" ValueChange="@FontSizeChange"></NumericTextBoxEvents>
                    </SfNumericTextBox>
                </div>
            </div>
            <div class="row" style="padding-top: 8px">
                <div class="texstyle">
                    Font Style
                </div>
                <div class="col-xs-6">
                    <SfDropDownList TValue="@string" Width="170px" TItem="@FontFamily" @bind-Value="@fontstyle" ID="fontFamily" Enabled="true" Placeholder="Select a font type" CssClass="textboxstyle" PopupWidth="150" DataSource="@FontFamilyLists">
                        <DropDownListEvents TItem="FontFamily" TValue="string" ValueChange="FontChange"></DropDownListEvents>
                        <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings>
                    </SfDropDownList>
                </div>
            </div>
            <div class="row" style="padding-top: 8px">
                <div class="texstyle">
                    Font Color
                </div>
                <div class="col-xs-6">
                    <SfColorPicker ValueChange="OnFillColorChange" @bind-Value="@fillColor"></SfColorPicker>
                </div>
            </div>
        </div>

        <div class="row property-panel-content" style="padding-top: 10px">
            <div class="row row-header">
                Behavior
            </div>
            <div class="row" style="padding-top: 8px">
                <SfCheckBox ID="labelConstraints" Label="Label interaction" Checked="@InteractionValue" ValueChange="OnLabelInteractionChange" TChecked="bool"></SfCheckBox>
            </div>
        </div>
    </div>

</div>
@*End:Hidden*@
@code{

    private bool isUpdatePanelOnly = false;
    string appearance = "e-remove-selection";
    SfButton BoldButton;
    SfButton ItalicButton;
    SfButton UnderlineButton;
    static string selecteditem = "image-pattern-style e-selected-style";
    int fontsizeValue = 12;
    string fillColor = "#000";
    bool InteractionValue = false;
    string fontstyle = "Arial";
    static string unselecteditem = "image-pattern-style";
    Dictionary<string, string> dict = new Dictionary<string, string>() { { "left", unselecteditem }, { "right", unselecteditem }, { "center", unselecteditem }, { "bottomr", unselecteditem }, { "bottoml", unselecteditem }, { "bottomcenter_top", unselecteditem } };
    SfDiagram Diagram;
    SfNumericTextBox<int> fontsize;

    public DiagramConstraints Constraints { get; set; }
    public DiagramSnapSettings SnapSettings { get; set; }

    public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>();

    public ObservableCollection<DiagramConnector> ConnectorCollection = new ObservableCollection<DiagramConnector>();



    protected override void OnInitialized()
    {

        Constraints = DiagramConstraints.Default;

        DiagramNode node1 = CreateNode("industry", 300, 250, "Industry competitors");
        DiagramNode node2 = CreateNode("potential", 300, 110, "Potential entrants");
        DiagramNode node3 = CreateNode("suplier", 110, 250, "Suppliers");
        DiagramNode node4 = CreateNode("substitutes", 300, 390, "Substitutes");
        DiagramNode node5 = CreateNode("buyers", 490, 250, "Buyers");

        CreateConnector("connector1", "potential", "industry");
        CreateConnector("connector2", "suplier", "industry");
        CreateConnector("connector3", "substitutes", "industry");
        CreateConnector("connector4", "buyers", "industry");
        DiagramConnector connector1 = CreateConnector("connector5", "potential", "buyers");
        UpdateSegments(connector1, Direction.Right, 60);
        DiagramConnector connector2 = CreateConnector("connector6", "buyers", "substitutes");
        UpdateSegments(connector2, Direction.Bottom, 100);
        DiagramConnector connector3 = CreateConnector("connector7", "substitutes", "suplier");
        UpdateSegments(connector3, Direction.Left, 60);
        DiagramConnector connector4 = CreateConnector("connector8", "suplier", "potential");
        UpdateSegments(connector4, Direction.Top, 100);


    }


    public DiagramNode CreateNode(string id, double offx, double offy, string content)
    {
        DiagramNode node = new DiagramNode()
        {
            Id = id,
            OffsetX = offx,
            OffsetY = offy,
            Height = 50,
            Width = 130,
            Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Basic, BasicShape = BasicShapes.Rectangle, CornerRadius = 5 },
            Style = new NodeShapeStyle() { Fill = "#D5EDED", StrokeColor = "#7DCFC9", StrokeWidth = 1 }
        };

        DiagramNodeAnnotation annotation = new DiagramNodeAnnotation()
        {
            Content = content,
            Style = new AnnotationStyle() { Color = "#000" }
        };
        node.Annotations = new ObservableCollection<DiagramNodeAnnotation>()
{
            annotation
        };
        NodeCollection.Add(node);
        return node;
    }


    public DiagramConnector CreateConnector(string id, string sourceid, string targetid)
    {
        DiagramConnector connector = new DiagramConnector()
        {
            Id = id,
            SourceID = sourceid,
            TargetID = targetid,
            Type = Syncfusion.Blazor.Diagrams.Segments.Orthogonal,
            Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select,
        };
        ConnectorCollection.Add(connector);
        return connector;
    }
    public void UpdateSegments(DiagramConnector connector, Direction direction, double length)
    {
        connector.Segments = new ObservableCollection<DiagramConnectorSegment>()
{
            new DiagramConnectorSegment()
            {
             Direction=direction,Type=Syncfusion.Blazor.Diagrams.Segments.Orthogonal,Length=length
            }
        };
        connector.TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None };
    }

    private List<object> orthoSegment1 { get; set; } = new List<object>{
        new  { direction= "Right", type= "Orthogonal", length= 60 }
    };
    private List<object> orthoSegment2 { get; set; } = new List<object>{
        new  { direction= "Bottom", type= "Orthogonal", length= 100 }
    };
    private List<object> orthoSegment3 { get; set; } = new List<object>{
        new  { direction= "Left", type= "Orthogonal", length= 60 }
    };
    private List<object> orthoSegment4 { get; set; } = new List<object>{
        new  { direction= "Top", type= "Orthogonal", length= 100 }
    };

    private void OnLabelInteractionChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        InteractionValue = args.Checked;
        UpdateAnnotation("interaction", 0);
    }
    private void FontBold()
    {
        UpdateAnnotation("bold", true);
        StateHasChanged();
    }

    private void FontItalic()
    {
        UpdateAnnotation("italic", true);
    }
    private void FontUnderLine()
    {
        UpdateAnnotation("underline", true);
    }
    private void FontChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FontFamily> args)
    {
        UpdateAnnotation("fontfamily", args.Value);
    }
    private void FontSizeChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<int> args)
    {
        fontsizeValue = int.Parse(args.Value.ToString());
        UpdateAnnotation("fontsize", args.Value);
    }

    public string StyleValue = "background-color:#008000";

    public void OnFillColorChange(ColorPickerEventArgs args)
    {
        this.StyleValue = "background-color:" + args.CurrentValue.Hex;
        UpdateAnnotation("fontcolor", args.CurrentValue.Hex);
        this.StateHasChanged();
    }
    private void TemplateChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
    {
        UpdateAnnotation("template", args.Value);
    }
    private void UpdateAnnotation(string name, object value)
    {
        for (var i = 0; i < Diagram.SelectedItems.Nodes.Count; i++)
        {
            var node = Diagram.SelectedItems.Nodes[i];
            for (var j = 0; j < node.Annotations.Count; j++)
            {
                var annotationStyle = node.Annotations[j].Style;
                if (name == "fontsize")
                {
                    annotationStyle.FontSize = Double.Parse(value.ToString());
                }
                else if (name == "underline")
                {
                    annotationStyle.TextDecoration = annotationStyle.TextDecoration == TextDecoration.Underline ? TextDecoration.None : TextDecoration.Underline;
                }
                else if (name == "fontfamily")
                {
                    annotationStyle.FontFamily = value.ToString();
                }
                else if (name == "bold")
                {
                    if (annotationStyle.Bold)
                        annotationStyle.Bold = false;
                    else
                        annotationStyle.Bold = true;
                }
                else if (name == "italic")
                {
                    if (annotationStyle.Italic)
                        annotationStyle.Italic = false;
                    else
                        annotationStyle.Italic = true;
                }
                else if (name == "fontcolor")
                {
                    annotationStyle.Color = value.ToString();
                }
                else if (name == "template")
                {
                    if (value.ToString() == "none")
                    {
                        node.Annotations[j].Template = null;
                        node.Annotations[j].Width = 0;
                        node.Annotations[j].Height = 0;
                    }
                    else
                    {
                        node.Annotations[j].Width = 25;
                        node.Annotations[j].Height = 25;
                    }
                }
                else if (name == "interaction")
                {
                    node.Annotations[j].Constraints = node.Annotations[j].Constraints ^ AnnotationConstraints.Interaction;
                }
                StateHasChanged();
            }
        }
    }

    private void SelectionChange(IBlazorSelectionChangeEventArgs arg)
    {

        if (arg.State == EventState.Changed)
        {
            DiagramNode node = null;
            if (arg.NewValue.Nodes != null && arg.NewValue.Nodes.Count > 0)
            {
                node = Diagram.GetNode(arg.NewValue.Nodes[0].Id);
            }

            if (node != null)
            {
                isUpdatePanelOnly = true;
                List<DiagramNodeAnnotation> annotations = (node.Annotations as ObservableCollection<DiagramNodeAnnotation>).ToList();
                NodeAnnotationOffset offset = annotations[0].Offset;
                if (annotations[0].Style.Bold && annotations[0].Style.TextDecoration != TextDecoration.Underline)
                {
                    BoldButton.FocusIn();

                }
                else if (annotations[0].Style.Italic && annotations[0].Style.TextDecoration != TextDecoration.Underline)
                {
                    ItalicButton.FocusIn();

                }
                else if (annotations[0].Style.TextDecoration == TextDecoration.Underline)
                {
                    UnderlineButton.FocusIn();
                }
                if (offset.X == 0 && offset.Y == 0)
                {
                    UpdatePosition("left", arg.NewValue.Nodes);
                }
                else if (offset.X == 1 && offset.Y == 0)
                {
                    UpdatePosition("right", arg.NewValue.Nodes);
                }
                else if (offset.X == 0 && offset.Y == 1)
                {
                    UpdatePosition("bottoml", arg.NewValue.Nodes);
                }
                else if (offset.X == 1 && offset.Y == 1)
                {
                    UpdatePosition("bottomr", arg.NewValue.Nodes);
                }
                else if (offset.X == 0.5 && offset.Y == 0.5)
                {
                    UpdatePosition("center", arg.NewValue.Nodes);
                }
                else if (offset.X == 0.5 && offset.Y == 1)
                {
                    UpdatePosition("bottomcenter_top", arg.NewValue.Nodes);
                }
                isUpdatePanelOnly = false;
            }
            EnableOptions(arg);
        }
    }
    private void UpdatePosition(string id, ObservableCollection<DiagramNode> Nodes)
    {
        for (int i = 0; i < Nodes.Count; i++)
        {
            DiagramNode node = Diagram.GetNode(Nodes[i].Id);
            for (int j = 0; j < node.Annotations.Count; j++)
            {
                DiagramNodeAnnotation annotation = node.Annotations[j] as DiagramNodeAnnotation;
                updateAnnotation(id, annotation);
            }
        }
    }
    //Update the Annotation Position based on the selection
    private void UpdatePosition(string id)
    {
        for (int i = 0; i < Diagram.SelectedItems.Nodes.Count; i++)
        {
            DiagramNode node = Diagram.SelectedItems.Nodes[i] as DiagramNode;
            for (int j = 0; j < node.Annotations.Count; j++)
            {
                DiagramNodeAnnotation annotation = node.Annotations[j] as DiagramNodeAnnotation;
                updateAnnotation(id, annotation);
            }
        }
    }
    private void updateAnnotation(string id, DiagramNodeAnnotation annotation)
    {
        Diagram.BeginUpdate();
        if (!isUpdatePanelOnly)
        {
            switch (id)
            {
                case "left":
                    setAnnotationPosition(annotation, 0, 0, VerticalAlignment.Top, HorizontalAlignment.Left);
                    break;
                case "right":
                    setAnnotationPosition(annotation, 1, 0, VerticalAlignment.Top, HorizontalAlignment.Right);
                    break;
                case "bottoml":
                    setAnnotationPosition(annotation, 0, 1, VerticalAlignment.Bottom, HorizontalAlignment.Left);
                    break;
                case "bottomr":
                    setAnnotationPosition(annotation, 1, 1, VerticalAlignment.Bottom, HorizontalAlignment.Right);
                    break;
                case "center":
                    setAnnotationPosition(annotation, 0.5f, .5f, VerticalAlignment.Center, HorizontalAlignment.Center);
                    break;
                case "bottomcenter_top":
                    setAnnotationPosition(annotation, 0.5f, 1, VerticalAlignment.Top, HorizontalAlignment.Center);
                    break;
            }
        }
        updateSelection(id);
        upateProprtyPanel(annotation);
        Diagram.EndUpdate();
    }
    private void upateProprtyPanel(DiagramNodeAnnotation annotation)
    {
        fontsizeValue = int.Parse(annotation.Style.FontSize.ToString());
        fontstyle = annotation.Style.FontFamily;

        fillColor = annotation.Style.Color;


        if ((annotation.Constraints.HasFlag(AnnotationConstraints.Interaction)))
        {
            InteractionValue = true;
        }
        else
        {
            InteractionValue = false;
        }
        //fontsize.DataBind();
    }
    private void updateSelection(string id)
    {
        for (int i = 0; i < dict.Count; i++)
        {
            var value = dict.Values.ElementAt(i);
            var key = dict.Keys.ElementAt(i);
            if (dict.ContainsKey(id) && key == id)
            {
                value = selecteditem;
            }
            else
            {
                value = unselecteditem;
            }
            dict.Remove(key);
            dict.Add(key, value);
        }

        StateHasChanged();
    }

    //set the Annotation Position
    private void setAnnotationPosition(DiagramNodeAnnotation annotation, float offsetX, float offsetY, VerticalAlignment vAlignment, HorizontalAlignment hAlignment)
    {
        if (annotation.Offset.X != offsetX)
            annotation.Offset.X = offsetX;
        if (annotation.Offset.Y != offsetY)
            annotation.Offset.Y = offsetY;
        annotation.VerticalAlignment = vAlignment;
        annotation.HorizontalAlignment = hAlignment;
        if (vAlignment == VerticalAlignment.Top && hAlignment == HorizontalAlignment.Left)
        {
            annotation.Margin = new NodeAnnotationMargin() { Left = 3, Top = 3 };
        }
        else if (vAlignment == VerticalAlignment.Top && hAlignment == HorizontalAlignment.Right)
        {
            annotation.Margin = new NodeAnnotationMargin() { Right = 3, Top = 3 };
        }
        else if (vAlignment == VerticalAlignment.Bottom && hAlignment == HorizontalAlignment.Left)
        {
            annotation.Margin = new NodeAnnotationMargin() { Left = 3, Bottom = 3 };
        }
        else if (vAlignment == VerticalAlignment.Bottom && hAlignment == HorizontalAlignment.Right)
        {
            annotation.Margin = new NodeAnnotationMargin() { Right = 3, Bottom = 3 };
        }
    }
    //Enable or disable the property panel
    private void EnableOptions(IBlazorSelectionChangeEventArgs arg)
    {
        if (arg.NewValue != null)
        {
            if (arg.NewValue.Nodes != null && arg.NewValue.Nodes.Count > 0)
            {
                appearance = "e-remove-selection";
            }
            else
            {
                appearance = "";
                updateSelection("");
            }
        }
    }





    public class FontFamily
    {
        public string Name { get; set; }
    }
    private List<FontFamily> FontFamilyLists = new List<FontFamily>() {
        new FontFamily() { Name ="Arial"},
        new FontFamily() { Name ="Aharoni" },
        new FontFamily() { Name ="Bell MT"},
        new FontFamily() { Name = "Fantasy" },
        new FontFamily() { Name ="Times New Roman" },
        new FontFamily() { Name ="Segoe UI" },
        new FontFamily() { Name ="Verdana" },
    };
    private async void OnCreated(object obj)
    {
        await Diagram.Select(new ObservableCollection<DiagramNode>() { Diagram.Nodes[0] }, null);
    }

}